<template>
    <div>
        <div class="v-modal">
            <transition name="modal-fade">
                <div class="modal-wrap" v-if="visible">
                    <Custom @close="handleClose" :params="params"></Custom>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
export default {
    components: { Custom: null },
    props: {
        // 过渡传递给自定义组件的props中
        params: { type: Object, default: () => ({}) }
    },
    data() {
        return {
            visible: false
        }
    },
    methods: {
        handleClose() {
            this.visible = false
        }
    },
    mounted() {
        document.querySelector('body').appendChild(this.$el)
        this.visible = true;
        //console.log("modal组件",this.params)
    },
    watch: {
        visible(newVal) {
            if (!newVal) {
                this.$el.addEventListener('transitionend', () => {
                    this.$destroy()
                })
            }
        }
    },
    destroyed() {
        this.$el.parentNode.removeChild(this.$el)
    }
}
</script>

<style lang="scss">
@import "./index.scss"
</style>